#template('colorThemeInit.vm')
.upload-status-container {
  position: relative;
}
.upload-status {
  position: relative;
  padding: .3em 1em .3em 22px;
  background: $theme.highlightColor none 2px .8em no-repeat;
  border-radius: 7px; /* Same value as @border-radius-base from Flamingo. */
  margin: .5em 0;
  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 1em;
}
.upload-status .status-icon {
  display: none;
}
.upload-status.upload-inprogress .status-icon.icon-inprogress,
.upload-status.upload-done .status-icon.icon-done,
.upload-status.upload-canceled .status-icon.icon-canceled,
.upload-status.upload-error .status-icon.icon-error {
  display: inherit;
}
.status-icon.icon-inprogress {
  height: 14px;
  width: 17px;
  background-image: url("$xwiki.getSkinFile('icons/xwiki/spinner.gif')");
}
.progress-info, .file-info {
  font-size: .91em;
}
.file-info {
  margin: .5em 0;
}
.file-info .file-name {
  font-weight: bold;
}
.file-info .file-size {
  font-style: italic;
  font-size: .83em;
}
.file-info .buttonwrapper, .file-info .upload-canceled-label {
  float: right;
  margin: 0;
}
.progress-info {
  flex-basis: 100%;
}
.upload-inprogress .progress-info {
  opacity: 1;
}
.progress-info .progress-time {
  float: right;
  text-align: right;
}
.progress-info .progress-percentage {
  margin: 0 0.5em 0 0;
}
.progress-info .progress, .progress-info .progress-container {
  height: 6px;
  border-radius: 5px;
}
.progress-info .progress {
  background-color: $theme.notificationSuccessColor;
  box-shadow: inset 0 0 5px rgba(1,1,1,.2);
  width: 0;
}
.progress-info .progress-container {
  border: 1px solid $theme.notificationSuccessColor;
  border-radius: 7px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba(0,0,0,.2), inset 0 0 5px rgba(0,0,0,.2);
  height: 8px;
  margin: 0.3em 0;
  width: 100%;
}
.upload-done .status-icon.icon-done {
  color: $theme.notificationSuccessColor;
}
.upload-canceled .file-info .file-name,
.upload-canceled .status-icon.icon-canceled,
.upload-error .file-info .file-name,
.upload-error .status-icon.icon-error {
  color: $theme.notificationErrorColor;
}
.upload-canceled .progress-info .progress-container {
  border-color: $theme.notificationWarningColor;
}
.upload-canceled .progress-info .progress {
  background-color: $theme.notificationWarningColor;
}
.upload-error .progress-info .progress {
  background-color: $theme.notificationErrorColor;
}
.upload-error .progress-info .progress-container {
  border-color: $theme.notificationErrorColor;
}
.upload-canceled-label {
  color: $theme.notificationErrorColor !important;
  font-weight: bold;
}
